<template>
  <el-scrollbar
    :wrap-class="`xgm-scrollbar-wrapper ${scrollbarClass}`"
    class="xgm-scrollbar"
  >
    <slot></slot>
  </el-scrollbar>
</template>

<script>
  export default {
    name: 'Scrollbar',
    props: {
      scrollbarClass: {
        default: '',
        type: String,
      },
      listenScroll: {
        type: Boolean, // 监听滚动
        default: false,
      },
    },
    mounted() {
      if (this.listenScroll) this.scroll()
    },
    beforeDestroy() {
      if (this.listenScroll && this.scrollEl)
        this.scrollEl.removeEventListener('scroll', () => {}, false)
    },
    methods: {
      scroll() {
        this.scrollEl = this.$el.childNodes[0]
        this.scrollEl.addEventListener(
          'scroll',
          (e) => {
            this.$emit('scroll', e.target)
          },
          false
        )
      },
    },
  }
</script>

<style lang="scss" scoped>
  .el-scrollbar.xgm-scrollbar {
    height: 100%;
    ::v-deep.el-scrollbar__wrap.xgm-scrollbar-wrapper {
      margin: 0 !important;
      overflow: auto;
      &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
      }
    }
  }
</style>
